<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.addEventListener('load', function() {
            // setTimeout
            // window.setTimeout('调用函数', 延迟的时间)
            // window可以省略
            // 延时时间是毫秒
            // 页面中可能存在多个定时器，可以给定时器加标识符（名字）var timer1 = setTimeout(calkback, 2000);

            // setTimeout(function() {
            //     alert('时间到了');
            // }, 2000);

            // var timer1 = setTimeout(calkback, 2000);
            // var timer2 = setTimeout(calkback, 3000);

            // setTimeout('calkback()', 2000); 不提倡这么写

            function calkback() {
                alert('时间到了');
            }

            // 5S 后隐藏广告
            var timer3 = setTimeout(function() {
                var ad = document.querySelector('.ad');
                ad.style.display = 'none';
            }, 5000);

            // clearTimeout('定时器ID') 定时器ID就是定时器 名字
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                clearTimeout(timer3);
            });
        });
    </script>
</head>

<body>
    <img class="ad" src="素材/ad.jpg" alt="">
    <br>
    <button>点击停止关闭广告</button>
</body>

</html>